* {font-family: "Microsoft YaHei UI"}
.container{margin: 0!important;padding: 0!important;width: 100%}
.header {position: relative;background: #848484;}
nav.navbar {width: 100%;background: #426efe;margin-bottom: 0;border: none}
nav.navbar .navbar-header {margin-left: 15%!important;}
nav.navbar .navbar-brand {padding: .9rem!important;}
nav.navbar .navbar-brand img {height: 100%}
nav.navbar .navbar-nav {margin-left: 10%}
nav.navbar .navbar-nav a {color: #fff;font-size: 1.3rem;}
nav.navbar .navbar-nav a:hover {background: none!important;}
.collapsing li {text-align: center; width: 50%;margin: 0 auto;}
.collapsing ul {margin: 0px;}
.collapse.in li {text-align: center;width: 50%;margin: 0 auto;}
.collapse.in ul {margin: 0px;}
nav.navbar .navbar-nav li:hover {background: none!important;}
nav.navbar .navbar-nav li.active  a{color:#fda81d; background: none}
nav.navbar .navbar-nav li.active {border-bottom: 1px solid #fda81d;}
.section {overflow: hidden}
banner {overflow: hidden}
banner .banner1 img.icon{position: absolute;top: 0px; z-index: 2}
banner img {width: 100%;display: block;}
.header-title {color: #feaa1d; text-align: center; }
.header-title .cn-title , .header-title .en-title {margin: .3rem;}
.header-title .cn-title {font-size: 1.5rem!important}
.header-title .en-title {font-size: 1.3rem!important}
.section .header-title {width: 100%; opacity: 0;padding-top: 1.8rem}
.footer {background: #1e63fe;text-align: center;padding: 2rem 0;position: absolute;bottom: 0px; width: 104%}
.footer .list {width: 100%;padding: 0;font-size: 1rem;height: 2rem;line-height: 2rem;}
.footer .footer-left {padding-top: 10px;}
.footer .footer-left img{height: 100%;display: block}
.footer .list li{text-align: center;float: left;list-style: none;width: 16%; background: url('../images/bottom-nav-bg.png') no-repeat right center;}
.footer .list li a {color: #fff;font-size: 1rem}
.footer .list li.last {background: none;}
.footer p {color: #fff;font-size: 1rem;margin-top: 1rem;}
.footer-right {padding-top: 2rem}

@font-face
{
  font-family: msIcon;
  src: url('../fonts/ms-icon.ttf'),url('../fonts/ms-icon.eot') , url('../fonts/ms-icon.otf') , url('../fonts/ms-icon.svg') , url('../font/ms-icon.woff') , url('../font/ms-icon.woff2');
  src:url('../fonts/ms-icon.eot');
  src:url('../fonts/ms-icon.eot?#iefix')format('embedded-opentype'),
  url('../fonts/ms-icon.woff')format('woff'),
  url('../fonts/ms-icon.ttf')format('truetype'),
  url('../fonts/ms-icon.svg#NeuesBauenDemo')format('svg');
}
.ms-icon
{
    font-family:msIcon;
    font-size : 5rem;
    overflow:hidden;
    color: #000222;
}
.ms-icon-big {
    font-size : 7em!important;
    overflow:hidden;
}

.ms-icon-middle {
    font-size : 6.5em!important;
    overflow:hidden;
}

.ms-icon-phone:after
{
    content : 'b';
}

.ms-icon-computer:after
{
    content : 'a';
}

.ms-icon-sumiao:after
{
    content : 'c';
}
.ms-icon-pingmian:after
{
    content : 'd';
}
.ms-icon-php:after
{
    content : 'f';
}

.loader.ms-icon-kecheng
{
    font-size: 1rem;
    line-height: 7rem;
    border-radius: 7rem;
    width: 7rem;
    height: 7rem;
    background: #025ec5;
    text-align: center;
}

.loader.ms-icon-kecheng:after
{
    content : '课程体系';
    color: white;

}
.ms-icon-html5:after
{
    content : 'g';
}

.ms-icon-set:after
{
    content : 'e';
}

.ms-icon-world:after
{
    content : 'e';
}

.ms-icon-wechat:after
{
    content : 'h';
}

.ms-icon-lisen:after
{
    content : 'j';
}
.ms-icon-edit:after
{
    content : 'k';
}
.ms-icon-clock:after
{
    content : 'u';
}
.ms-icon-map:after
{
    content : 'm';
}
.ms-icon-book:after
{
    content : 'l';
}
.ms-icon-wenhao:after
{
    content : 's';
}

.ms-icon-light:after
{
    content : 'n';
}

.ms-icon-ditie:after
{
    content : 'n';
}
.ms-icon-ren:after
{
    content : 'o';
}

.ms-icon-bus:after
{
    content : 'q';
}
.ms-icon-build:after
{
    content : 'p';
}
.ms-icon-qi:after
{
    content : 'r';
}
.ms-icon-write:after
{
    content : 's';
}
.footer .active a{color:#fda81d!important;}
.banner1 {position: relative; height: 100%;}
.banner1 .banner-z {padding-top: 15rem;width: 100%;height: 100%; text-align: center; background: rgba(0,0,0,.3); position: absolute;top: 0;z-index: 5;}
.banner1 .banner-z h1 {color: white;border-bottom: 1px solid #fff; width: 25rem;font-size: 3rem; height: 8rem;line-height: 8rem; margin: 0 auto;}
.banner1 .banner-z p {color: white;border-bottom: 1px solid #fff; width: 30rem;font-size: 2rem; height: 8rem;line-height: 8rem; margin: 0 auto;}
.banner1 .banner-z .btn {color: red;background:none; border:1px solid #ccc; margin-top:3rem!important; width: 20rem;font-size: 1.8rem;margin: 0 auto;}
html {font-size: 62.5%; /*100 ÷ 16 × 100% = 625%*/}
@media screen and (min-width:320px) and (max-width:359px) and (orientation:portrait) {
    html { font-size: 62.3%; }
}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 69.3%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
    html { font-size: 72.24%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 74%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 77.125%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 79.86%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size: 83.375%; }
}
@media screen and (min-width:480px) and (max-width:500px) and (orientation:portrait){
    html { font-size: 85.375%; }
}
@media screen and (min-width:993px) {
    .pc {display: block}
    .mo {display: none}
    .banner1 .banner-z h1 {width: 45rem;}
    .banner1 .banner-z p {width: 55rem;}

}
@media screen and (max-width:993px) {
    .pc {display: none}
    .mo {display: block}
    .footer-left {display: none}
    .footer-right .list {display: none}
    .footer {padding: 0;}
    .footer-right {padding: 0;}
}
